<template>
	<view class="recorddetail">
		<view class="shops" v-if="membershipRecord && membershipRecord.type && membershipRecord.type == 1">
			<view class="titles">
				会员实物礼包二选一
			</view>
			<view class="names" v-if="shopDetail&&shopDetail.name">
				<text class="name infoname">{{shopDetail.name}}</text>
				<text class="flow" @click="goFlow" v-if="shopDetail.serial_num && (shopDetail.status== 3 | shopDetail.status == 4)">
					查看物流
				</text>
			</view>
			<view class="radios" v-else>
				<view class="radio_one" v-for="(shop,index) in shoplist" :key="index">
					<uni-icons @click="changeRadio(shop)" class="sel_icon" type="circle-filled" v-if="shop.checked" size="14" color="#F54642">
					</uni-icons>
					<uni-icons @click="changeRadio(shop)" class="sel_icon" type="circle" v-else size="14"
						color="#979797"></uni-icons>
					<text class="radio_name" @click="changeRadio(shop)">{{shop.name}}</text>
					<text class="flow" @click="goFlow"
						v-if="shopDetail.serial_num && (shopDetail.status== 3 | shopDetail.status == 4)">
						查看物流
					</text>
				</view>
			</view>
			<view v-if="isAddress == 1">
				<view class="address">
					{{shopDetail.contacts}} {{shopDetail.phone}}
				</view>
				<view class="address">
					{{shopDetail.address}}
				</view>
			</view>
			<view v-else-if="isAddress == 0 && addressinfo && addressinfo.id">
				<view class="address_info">
					<view>
						<text>{{addressinfo.name}} </text>
						<text>{{addressinfo.tel}}</text>
						<image class="edit_icon" :src="IMGLink+'/my/edit_icon.png'" @click="goAddress"></image>
					</view>

				</view>
				<view class="address_info">
					{{addressinfo.addr}}
				</view>
			</view>
			<view class="choose_addr" v-else @click="goAddress">
				<text>选择收货地址</text>
				<image class="edit_icon" :src="IMGLink+'/my/edit_icon.png'"></image>
			</view>

			<view>
				<button type="primary" class="confirm_btn" @click="confirmShop" v-if="isAddress == 0">确认提货</button>
				<button class="status default_btn" v-else>{{order_status[shopDetail.status]}}</button>
			</view>
		</view>

		<view class="shops">
			<view class="titles">
				当月礼包详情（{{month}}/12）
			</view>
			<view class="packet" v-for="(i,j) in packetDetail" :key="j">
				<text>【会员专享】{{i.title}}</text>
				<text>x{{i.count}}</text>
			</view>
		</view>

		<view class="shops">
			<view class="titles">
				使用规则
			</view>
			<view class="rule" v-for="(i,j) in ruleDetail" :key="j">
				{{i}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';

	import {
		vips,
		getUserMembershipRecord,
		vipShopList
	} from "@/api/my/my.js";
	import {
		addresslist
	} from "@/api/my/address.js";
	export default {
		data() {
			return {
				shopDetail: {},
				order_status: {
					1: "待付款",
					2: "待发货",
					3: "待收货",
					4: "已完成",
					5: "撤销订单",
					0: "没有商品",
					99: "已过期",
					88:"选择商品"
				},
				packetDetail: [],
				ruleDetail: [
					"1.购买礼包，支付开通会员即可获得全部礼包权益。",
					"2.补差价升级VIP，只升级月度礼包权益和VIP佣金权益，不再升级实物礼包，即补差价升级VIP均不赠送实物礼包。",
					"3.会员等级不同获得的月度会员礼包内容不同，月度会员礼包在购买日次月1日0时发放。",
					"4.仅支付开通的会员会获得实物奖励，需用户选择地址确认，平台将在确认地址后7个工作日内发送实物奖励。（若该商品无库存或其他原因无法发货，客服会联系协商解决）"
				],
				IMGLink: this.IMGLink,
				isAddress: 0,
				recordid: "",
				shoplist: [],
				membershipRecord: {},
				month:"",
			}
		},
		computed: {
			...mapState(['addressinfo']),
			isShop() {
				if (this.shopDetail && this.shopDetail instanceof Object && Object.keys(this.shopDetail).length > 0) {
					return true;
				}
				return false;
			}
		},
		watch: {

		},
		onLoad(options) {
			this.recordid = options.id;
			this.getRecords();
			this.$store.commit("setAddressinfo", {});
		},
		onShow() {
			if (this.addressinfo && this.addressinfo.id) {
				this.getAddressInfoById();
			} else {
				this.getDefaultAddress();
			}
		},
		methods: {
			// 获取记录详情
			async getRecords() {
				const res = await getUserMembershipRecord({
					id: Number(this.recordid)
				});
				const {
					couponsInfo,
					goodsInfo,
					is_address,
					membershipRecord,
					month
				} = res.data;
				this.packetDetail = couponsInfo;
				this.shopDetail = goodsInfo;
				this.isAddress = is_address;
				this.membershipRecord = membershipRecord;
				this.month = month;
				if (this.isAddress != 1) { //0-没有地址，1-有收货地址
					this.getDefaultAddress();
				}
				if (this.membershipRecord.type == 1) {
					this.getVipShop();
				}
			},
			// 获取会员商品
			getVipShop() {
				vipShopList().then(({
					data: {
						goodsInfo
					}
				}) => {
					let sel=goodsInfo.filter(pp=>pp.id == this.shopDetail.goods_id);
					if(sel.length>0){
						goodsInfo[goodsInfo.findIndex(item=>item.id == sel[0].id)].checked = true;
					}
					else{
						goodsInfo[0].checked = true;
					}
					this.shoplist = goodsInfo;
				})
			},
			// 获取默认地址
			getDefaultAddress() {
				addresslist("getUserDefaultAddressList", {})
					.then((res) => {
						let datas = res.data.list;
						if (Object.keys(datas).length > 0) {
							this.$store.commit("setAddressinfo", datas);
						}
					})
					.catch((error) => {});
			},
			// 根据地址id获取地址详情
			getAddressInfoById() {
				addresslist("getUserAddressDetail", {
						id: this.addressinfo.id
					})
					.then((res) => {
						let datas = res.data.userAddressInfo;
						this.$store.commit("setAddressinfo", datas);
					})
					.catch((error) => {});
			},
			// 修改地址
			goAddress() {
				uni.navigateTo({
					url: `/pagesA/my/address/addressList?type=choose`
				})
			},
			async doAddress() {
				let sel = this.shoplist.filter(item => item.checked);
				uni.showLoading({
					title: '地址添加中..'
				});
				const res = await vips('addOrderAddres', {
					address_id: this.addressinfo.id,
					id: this.membershipRecord.id,
					goods_id: sel[0].id
				});
				if (res.code == 200) {
					this.$Toast.none('确认提货成功，等待货品发货哟～');
					this.getRecords();
				}
			},
			// 查看物流
			goFlow() {
				uni.navigateTo({
					url: `/pagesA/my/orders/shopflow?serial_num=${this.shopDetail.serial_num}`
				})
			},
			confirmShop() {
				let sel = this.shoplist.filter(item => item.checked);
				if (!this.addressinfo || !this.addressinfo instanceof Object || Object.keys(this.addressinfo).length ==
					0) {
					this.$Toast.none('请选择收获地址');
				} else if (sel.length == 0) {
					this.$Toast.none('请选择会员实物礼包');
				} else {
					uni.showModal({
						title: '提示',
						content: '确定提货吗？',
						success: (res) => {
							if (res.confirm) {
								this.doAddress();
							} else if (res.cancel) {
								console.log('用户点击取消')
							}
						}
					})
				}
			},
			changeRadio(i) {
				if (this.isAddress != 1) {
					this.shoplist.forEach(pp => pp.checked = false)
					i.checked = true;
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import "../my.scss";

	.recorddetail {
		padding: 30rpx 0;

		.shops {
			@include cards;
			padding: 30rpx 20rpx;
			background-color: #FFFFFF;
			margin-bottom: 30rpx;

			.names {
				color: #292929;
				font-size: 26rpx;
				margin-bottom: 30rpx;
				@include flexLayout(center, space-between);

				.status {
					width: 120rpx;
					color: #F54642;
					font-size: 28rpx;
					text-align: right;
				}

				.name {
					width: 61%;
				}
				.infoname{
					width: 78%;
				}
			}

			.address_info {
				color: #525252;
				font-size: 26rpx;

				text {
					margin-right: 10rpx;
				}
			}

			.choose_addr {
				@include flexLayout(center, space-between);
			}

			.edit_icon {
				width: 32rpx;
				height: 28rpx;
				position: absolute !important;
				right: 50rpx;
				margin-top: 4rpx;
			}

			.address {
				line-height: 48rpx;
				color: #525252;
				font-size: 26rpx;
			}

			.titles {
				color: #292929;
				font-size: 30rpx;
				font-weight: 500;
				margin: 0 10rpx 10rpx;
			}

			.packet,
			.rule {
				color: #757575;
				font-size: 24rpx;
			}

			.packet {
				line-height: 56rpx;
				@include flexLayout(center, space-between);
			}

			.rule {
				margin: 20rpx 0;
			}

			.radios {
				padding: 20rpx 0 30rpx;
				color: #292929;
				font-size: 26rpx;

				.radio_one {
					@include flexLayout(center, flex-start);

					.sel_icon {
						margin: 16rpx;
					}

					.radio_name {
						width: 72%;
						@include exceedFlow(1);
					}
				}
			}

			.confirm_btn,
			.default_btn {
				width: 370rpx;
				height: 72rpx;
				line-height: 72rpx;
				color: #FFFFFF;
				background-color: #F54642;
				font-size: 28rpx;
				border-radius: 36rpx;
				margin: 40rpx auto 16rpx;
			}

			.default_btn {
				background-color: #A7A7A7;
			}

			.flow {
				color: #F54642;
			}

		}
	}
</style>
